<template>
    <div>
        <ul>
            <li v-for="(item,index)  in  arr" :key="index" @click="clicks(item,index)" :class="{ isActive:index == findIndex }">
                <span v-if="index==findIndex?!show:show"></span>

                {{item}}</li>
        </ul>
        <div style="width:100%;height:300px;background:red;" v-for="(item, index) in navData" :key="index" v-show="index==num">{{item.name}}</div>
    </div>

</template>

<script>
    export default {
        name: 'name',
        data() {
            return {
                num: '',
                show: false,
                findIndex: 0,
                arr: ["11", "333", "5555", "7777"],
                navData: [{
                    name: 1111111111111
                }, {
                    name: 2222222222222
                }, {
                    name: 333333333333
                }, {
                    name: 344444444444444
                }]
            }
        },
        methods: {
            clicks(item,index) {
                console.log(item);
                
                this.isactive = index;
                this.num = index;
            }
        }
    }
</script>

<style scoped>
    ul {
        width: 100%;
        height: 88px;
        line-height: 88px;
        margin: 0 auto;
        background: #3b2d50;
        color: #fff;
        font-size: 18px;
        display: flex;
        justify-content: space-between;



        /* .nav_li {
            background-color: #dedede;
            color: #353535;
        } */
    }

    ul li {
        /* text-align: center; */
        margin: 0 auto;
        width: 25%;
    }

    ul li:hover {
        background: chartreuse;
    }
</style>